<template>
  <div class="wrapper">
    <div class="title">我的订单</div>
    <div class="orders">
      <div class="order" v-for="(item, index) in list" :key="index">
        <div class="order__title">
          <span>{{ item.shopName }}</span>
          <span class="order__status">{{
            item.isCanceled ? '已取消' : '已下单'
          }}</span>
        </div>

        <div class="order__content">
          <div class="order__content__imgs">
            <template v-for="(subitem, index2) in item.products" :key="index2">
              <img
                :src="subitem.product.img"
                alt=""
                srcset=""
                class="order__content__img"
                v-if="index2 <= 3"
              />
            </template>
          </div>
          <div class="order__content__info">
            <div class="order__content__price">¥66.69</div>
            <div class="order__content__count">
              共{{ item.products.length }}件
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Docker />
</template>
<script>
import { get } from '../../utils/request'
import Docker from '../../components/Docker.vue'
import { reactive, toRefs } from 'vue'
const useorderListEffect = () => {
  const data = reactive({ list: [] })
  const getdata = async () => {
    const result = await get('api/order')
    if (result?.errno === 0 && result?.data) {
      data.list = result.data
    }
    // console.log(data.list)
  }
  getdata()
  const { list } = toRefs(data)
  return { list }
}
export default {
  components: { Docker },
  name: 'OrderList',
  setup(props) {
    const { list } = useorderListEffect()
    return { list }
  }
}
</script>
<style scoped lang="scss">
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0.5rem;
  width: 100%;
  background: rgb(248, 248, 248);
  .title {
    width: 100%;
    text-align: center;
    font-size: 0.16rem;
    color: #333333;
    line-height: 0.22rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    background: #fff;
  }
  .order {
    padding: 0.16rem;
    margin: 0.16rem 0.18rem;
    background: #fff;
    .order__title {
      display: flex;
      font-size: 0.16rem;
      color: #333333;
      margin-bottom: 0.16rem;
      .order__status {
        flex: 1;
        text-align: right;
        font-size: 0.14rem;
        color: #999999;
      }
    }
    .order__content {
      display: flex;
    }
    .order__content__imgs {
      flex: 1;
      display: flex;
      .order__content__img {
        width: 0.4rem;
        height: 0.4rem;
        margin-right: 0.14rem;
      }
    }
    .order__content__info {
      font-size: 0.12rem;
      color: #333333;
      line-height: 14px;
      text-align: right;
      .order__content__price {
        font-size: 0.14rem;
        color: #e93b3b;
        margin-bottom: 0.04rem;
      }
    }
  }
}
</style>
